<template>
  <div class="UserContent">
    <headerimg>
      <template v-slot:img>
        <img src="/img/cus_banner.jpg" />
      </template>
    </headerimg>
    <div class="UserContent-imgtitle">
      <imgtitle>
        <img src="/img/cus_title.jpg" />
      </imgtitle>
    </div>
    <iconisaction :region="region" @changAction="HandHomeLiover" :isActionIndex="isActionIndex"></iconisaction>
    <div class="commentItemList">
      <div class="commentItemList-content">
        <ul class="commentItemList-ul">
          <li class="commentItemList-li" v-for="(item) in UserContentListInfo" :key="item.id">
            <commentitem :Info="item"></commentitem>
          </li>
        </ul>
      </div>
      <div class="commentItemList-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="ListCount"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          :current-page="pageIndex"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import headerimg from "../conn/headerimg";
import imgtitle from "../conn/imgtitle";
import iconisaction from "../conn/iconisaction";
import commentitem from "../conn/commentitem";
import { UserContent } from "../../ajax/index";
export default {
  data() {
    return {
      region: [
        { id: 1, Country: "天猫", icon: "/img/mall-con.png" },
        { id: 2, Country: "微博", icon: "/img/weibo-con.png" },
        { id: 3, Country: "微信", icon: "/img/weixin-con.png" }
      ],
      isActionIndex: 1,
      pageIndex: 1,
      UserContentListInfo: [],
      ListCount: 2
    };
  },
  components: {
    headerimg,
    imgtitle,
    iconisaction,
    commentitem
  },
  methods: {
    HandHomeLiover(index) {
      this.isActionIndex = index;
    },
    getUserContent() {
      UserContent({
        page: this.pageIndex
      })
        .then(result => {
          if (result.code) {
            // this.UserContentListInfo = result.date.map(item => {
            //   item.icon
            // });
            this.UserContentListInfo = result.data;

            this.ListCount = result.pageNum;
          }
        })
        .catch(err => {});
    },
    handleCurrentChange(page) {
      this.pageIndex = page;
      this.getUserContent();
    }
  },
  created() {
    this.getUserContent();
  }
};
</script>
<style lang="scss">
.UserContent {
  .UserContent-imgtitle {
    margin: 60px auto;
  }
  .commentItemList {
    margin-top: 60px;
    height: 1000px;
    .commentItemList-content {
      height: 894px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .commentItemList-ul {
        width: 1300px;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .commentItemList-li {
          width: 50%;
          padding-bottom: 54px;
        }
      }
    }
    .commentItemList-page {
      display: flex;
      justify-content: center;
      margin-bottom: 64px;
      .el-pagination.is-background .btn-next,
      .el-pagination.is-background .btn-prev {
        border: 1px solid rgb(153, 153, 153);
        font-size: 14px;
        padding: 15px;
        padding-top: 3px;
        width: auto;
        height: 49px;
        color: #fff;
        border: 1px solid #999;
        background-color: #282828;
        & span {
          display: inline-block;
          line-height: 40px;
        }
        &:hover {
          background: #c6a65b;
          color: #fff;
          border-color: #c6a65b;
        }
      }
      .el-pagination.is-background .el-pager li {
        &:hover {
          background: #c6a65b;
          color: #fff;
          border-color: #c6a65b;
        }
        border: 1px solid rgb(153, 153, 153);
        &.active {
          background: #c6a65b;
        }
        padding: 15px;
        line-height: 49px;
        padding-top: 0px;
        background: #282828;
        height: 49px;
        font-size: 14px;
        width: auto;
        display: inline-block;
        color: #fff;
      }
    }
  }
}
</style>